<template>
  <div class="table-page-search-wrapper">
    <a-form-model
      layout="inline"
      :rules="contractRules"
      :model="contractForm"
    >
      <a-row :gutter="48">
        <a-col :md="6" :sm="24">
          <a-form-model-item label="甲方">
            <a-select
              show-search
              v-model="contractForm.customer_id"
              placeholder="请选择甲方"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :not-found-content="null"
              style="width: 90%"
              @search="handleSearch"
              @change="handleChange"
            >
              <a-select-option :value="1">淘宝</a-select-option>
              <a-select-option :value="2">京东</a-select-option>
              <a-select-option :value="3">天猫</a-select-option>
            </a-select>
            <a-icon :style="{ width: '10%', fontSize: '20px' }" type="plus-circle" @click="addApply" />
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="甲方电话1">
            <a-input v-model="contractForm.phone1" placeholder="输入甲方电话1"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="甲方电话2">
            <a-input v-model="contractForm.phone2" placeholder="输入甲方电话2"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="短信发送至">
            <a-radio-group>
              <a-radio :value="1">甲方电话1</a-radio>
              <a-radio :value="2">甲方电话2</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="邮箱">
            <a-input v-model="contractForm.mail" placeholder="输入甲方邮箱"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="乙方">
            <a-select
              show-search
              v-model="contractForm.company"
              placeholder="选择签约公司"
            >
              <a-select-option :value="1">北京卓一</a-select-option>
              <a-select-option :value="2">北京精翰</a-select-option>
              <a-select-option :value="3">北京京标</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="合同类型">
            <a-select
              show-search
              v-model="contractForm.type"
              placeholder="选择签约公司"
            >
              <a-select-option :value="1">商标版权</a-select-option>
              <a-select-option :value="2">专利</a-select-option>
              <a-select-option :value="3">设计</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="部门经理">
            <a-input type="text" placeholder="输入部门经理" />
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="客户类型">
            <a-select
              show-search
              v-model="contractForm.customer_type"
              placeholder="选择签约公司"
            >
              <a-select-option :value="1">网络咨询</a-select-option>
              <a-select-option :value="2">手动添加</a-select-option>
              <a-select-option :value="3">黄页</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="乙方">
            <a-input type="text" placeholder="输入乙方电话号码" />
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-model-item label="甲方地址">
            <a-cascader
              :field-names="fieldNames"
              :options="addressOptions"
              :load-data="loadData"
              @change="onChange"
              style="width: 40%;margin-right:2%"
              change-on-select
              placeholder="选择省市区"
            />
            <a-input style="width: 58%" type="text" placeholder="详细地址" />
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item label="顾问">
            <a-input type="text" placeholder="输入顾问姓名" />
          </a-form-model-item>
        </a-col>
        <a-col :md="24">
          <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
            <a-button size="small" type="primary">保存合同</a-button>
            <a-button size="small" style="margin-left: 8px" @click="reset">重置</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form-model>
    <apply-modal v-if="visible" @cancel="onCancel"></apply-modal>
  </div>
</template>

<script>
  import ApplyModal from '@/views/customer/components/ApplyModal'
  export default {
    components: {
      ApplyModal
    },
    name: 'ContactInfo',
    data () {
      return {
        visible: false,
        contractRules: {},
        contractForm: {},
        addressOptions: [],
        fieldNames: {
          label: 'fullname',
          value: 'id',
          children: 'children'
        },
        level: 0
      }
    },
    methods: {
      addApply () {
        this.visible = true
      },
      handleSearch () {},
      handleChange () {},
      loadData (selectedOptions) {
        // const app = this
        const targetOption = selectedOptions[selectedOptions.length - 1]
        targetOption.loading = true
        // getCity(targetOption.id)
        //   .then(res => {
        //     const list = res.result.list
        //     targetOption.loading = false
        //     if (app.level === 2) {
        //       for (const k in list) {
        //         list[k].isLeaf = true
        //       }
        //     } else {
        //       for (const k in list) {
        //         list[k].isLeaf = false
        //       }
        //     }
        //     targetOption.children = list
        //     app.addressOptions = [...app.addressOptions]
        //   })
      },
      onChange (value, selectedOptions) {
        const app = this
        app.level = value.length
        for (const k in selectedOptions) {
          if (k === '0') {
            app.form['province'] = selectedOptions[k].fullname
          }
          if (k === '1') {
            app.form['city'] = selectedOptions[k].fullname
          }
          if (k === '2') {
            app.form['area'] = selectedOptions[k].fullname
          }
        }
      },
      onCancel (visible) {
        this.visible = visible
      },
      reset () {
        this.contractForm = {}
      }
    }
  }
</script>

<style scoped>

</style>
